{% comment %} {% if shop.customer_accounts_enabled %}
<div class="bg-gray-100">
  <div class="container py-6 py-md-7">
    <div class="account-card px-3 py-4 p-md-6 bg-white mx-auto rounded-1">
      {% render 'account-register' %}
    </div>
  </div>
</div>
{% else %}
  {% render 'main-404' %}
{% endif %}
<script src="{{ 'customers-v2-register.min.js' | asset_url }}" defer="defer"></script> {% endcomment %}


<section class="register as-register">
  <div class="container pt-7 h-8">
    <h1 class="text-center mb-0 h4">{{ 'customer.register.title' | t }}</h1>
    <div class="row justify-content-center">
      <div class="mw-text-3">
        {% form 'create_customer', class: 'as-validate-form as-register-form', novalidate: 'novalidate', autocomplete: "off" %}
          {%- if form.errors -%}
            <div class="as-email-errors-wrap">
            {%- for field in form.errors -%}
            <div class="mt-4 d-flex align-items-center">
              <div class="me-2 text-danger">
                {% render 'icon-alert-circle' %}
              </div>
              {%- if field == 'form' -%}
              <div class="text-danger fs-footnote ">
                {{ form.errors.messages[field] }}
              </div>
              {%- else -%}
              <div class="text-danger fs-footnote ">
                {{ form.errors.translated_fields[field] | capitalize }}
                {{ form.errors.messages[field] }}
              </div>
              {%- endif -%}
            </div>
            {%- endfor -%}
            </div>
          {%- endif -%}
          <div class="form-pristine mt-4">
            <input type="text" name="customer[first_name]" placeholder="{{ 'customer.register.first_name' | t }}" class="input-pristine form-control">
          </div>
          <div class="form-pristine mt-3">
            <input type="text" name="customer[last_name]" placeholder="{{ 'customer.register.last_name' | t }}" class="input-pristine form-control">
          </div>
          <div class="form-pristine mt-3">
            <input type="email" name="customer[email]" data-pristine-required-message="{{ 'general.subscribe.email_error_message' | t }}"
            data-pristine-email-message="{{ 'general.subscribe.email_error_message' | t }}" placeholder="{{ 'customer.register.email' | t }}" class="input-pristine form-control as-register-email" required>
          </div>
          <div class="as-pwd-wrap form-pristine position-relative mt-3">
            <div class="d-flex align-items-center">
              <input type="password" name="customer[password]" data-pristine-pattern= "/^[^\s]{8,}$/" data-pristine-pattern-message="{{ 'customer.customer.password_pattern_error_message' | t }}" data-pristine-required-message="{{ 'customer.customer.password_error_message' | t }}" placeholder="{{ 'customer.register.password' | t }}" class="as-pwd-input input-pristine form-control pe-6" required>
              <div class="as-visible-control visible-control content-invisible" required>
                <div class="icon-eye-off cursor-pointer">
                  {% render 'icon-eye-off' %}
                </div>
                <div class="icon-eye cursor-pointer">
                  {% render 'icon-eye' %}
                </div>
              </div>
            </div>
            <p class="as-pwd-tip fs-footnote mb-0 gray-600 mt-1">{{ 'customer.register.items' | t }}</p>
          </div>
          <div class="form-pristine mt-3 lh-sm form-check">
            <input id="input-checkbox" name="item" type="checkbox" data-pristine-required-message="{{ 'general.subscribe.policy_error_message' | t }}" class="input-pristine form-check-input me-2" required>
            <label for="input-checkbox" class="gray-600 fs-footnote form-check-label">
              {{ 'customer.register.privacy_policy_html' | t }}
            </label>
          </div>
          <div class="form-pristine mt-2 form-check">
            <input id="register-subscribe" name="subscribe" form="_subscribe-form" type="checkbox" class="input-pristine form-check-input me-2" checked="checked">
            <label for="register-subscribe" class="gray-600 fs-footnote form-check-label">
              {{ 'customer.register.subscribe_text' | t }}
            </label>
          </div>
          <div class="mt-4">
            <button class="btn btn-primary as-hidden-tip w-100 btn-mw" type="submit">{{ 'customer.register.submit' | t }}</button>
          </div>
          <div class="text-center mt-2 fs-footnote">
            {{ 'customer.register.back_to_login_html' | t }}
          </div>
        {% endform %}

        <form id="_subscribe-form" action="{{ settings.subscribe_api }}" method="POST" autocomplete="off" novalidate>
          <input type="hidden" class="as-render-email" name="email">
        </form>

      </div>
    </div>
  </div>
</section>